<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="创建实体版本"
    :destroyOnClose="true"
    :mask-closable="false"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm">
      <template #CollapseSlot>
        <Collapse ref="collapseRef" :mode="'add'" @success="handleSuccess" />
      </template>
    </BasicForm>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemas } from './addEntityVersion.data';
  import Collapse from './Collapse.vue';
  import { onMounted, ref } from 'vue';
  import { modalStyleSetting, modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  const collapseRef = ref();
  const collapseFormValues = ref<any>();
  const emit = defineEmits(['success']);
  const [registerModal, { setModalProps }] = useModalInner();
  const [registerForm, { validate, resetFields }] = useForm({
    layout: 'vertical',
    schemas,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
    submitButtonOptions: { text: '全部删除', color: 'primary' },
    resetButtonOptions: { text: '添加实体类型', color: 'primary' },
    submitFunc: async () => {},
    resetFunc: async () => {},
  });
  const handleSuccess = (val) => {
    collapseFormValues.value = Object.assign({}, val);
  };
  const handleSubmit = async () => {
    try {
      const values = await validate();
      await collapseRef.value.collectValues();
      emit('success', { key: 'add', values, collapseFormValues: collapseFormValues.value });
    } catch (error) {}
  };
  onMounted(() => {
    setModalProps({
      ...modalStyleSetting,
    });
  });
</script>
